<template>
  <!-- 公文配置管理 -->
  <div class="document-management">
    <div style="padding: 1em; background: #fff">
      <el-card>
        <el-button
          style="margin-right: 6px; margin-bottom: 10px"
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="add"
          >新增</el-button
        >
        <!--:loading="loading"-->
        <!--:pagination="pagination"-->
        <!--:scroll="params.length>0?{x:1300}:{}"-->
        <a-table
          :expandedRowKeys="expandedRowKeys"
          @expand="onExpand"
          :bordered="true"
          :data-source="params"
          size="small"
          :rowKey="(record) => record.id"
        >
          <a-table-column
            :width="100"
            key="title"
            title="类别"
            data-index="title"
            ellipsis="true"
            align="center"
          />
          <!-- <a-table-column :width="100" key="isActive" title="是否有效" data-index="isActive" ellipsis="true" align="center">
          <template slot-scope="text, scope">
            <el-switch v-show="scope.layer == 1?false:true"
                       v-model="scope.isActive"
                       :active-value="1"
                       :inactive-value="0"
                       active-color="#13ce66"
                       @change="userStateChange(scope)"/>
          </template>
        </a-table-column> -->
          <a-table-column
            :width="100"
            key="layer"
            title="层级"
            data-index="layer"
            ellipsis="true"
            align="center"
          >
            <template slot-scope="text">
              <el-tag type="success" v-if="text === 1">一 级</el-tag>
              <el-tag type="warning" v-else>二 级</el-tag>
            </template>
          </a-table-column>
          <a-table-column
            :width="100"
            key="operation"
            title="操作"
            data-index="operation"
            ellipsis="true"
            align="center"
          >
            <template slot-scope="text, scope">
              <el-button
                type="success"
                size="mini"
                v-show="scope.layer == 1 ? false : true"
                @click="showUpdateDialog(scope)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="mini"
                v-show="scope.layer == 1 ? false : true"
                @click="userStateChange(scope)"
                >删除</el-button
              >
            </template>
          </a-table-column>
        </a-table>
      </el-card>
    </div>
    <!-- 新增-模态框 -->
    <el-dialog :title="addDialog.title" :visible.sync="addDialog.visible">
      <el-form ref="addDialog.addForm" :model="addDialog.addForm" status-icon>
        <el-form-item
          label="父级分类"
          label-width="80px"
          size="small"
          prop="parentType"
        >
          <el-select
            v-model="addDialog.addForm.parentType"
            placeholder="请选择父级"
            size="small"
          >
            <el-option
              v-for="item in ['发文类别', '安全权限', '发文部门', '优先级']"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="描述"
          label-width="80px"
          size="small"
          prop="describe"
        >
          <el-input type="text" v-model="addDialog.addForm.describe"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="addDialog.visible = false"
          >取 消</el-button
        >
        <el-button type="primary" size="small" @click="submitHandler('form')"
          >提 交</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改-模态框 -->
    <el-dialog :title="updateDialog.title" :visible.sync="updateDialog.visible">
      <el-form
        ref="updateDialog.addForm"
        :model="updateDialog.updateForm"
        status-icon
      >
        <el-form-item
          label="父级分类"
          label-width="80px"
          size="small"
          prop="parentType"
        >
          <el-select
            v-model="updateDialog.updateForm.parentType"
            placeholder="请选择父级"
            size="small"
            disabled
          >
            <el-option
              v-for="item in ['发文类别', '安全权限', '发文部门', '优先级']"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="描述"
          label-width="80px"
          size="small"
          prop="describe"
        >
          <el-input
            type="text"
            v-model="updateDialog.updateForm.describe"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateDialog.visible = false"
          >取 消</el-button
        >
        <el-button type="primary" size="small" @click="updateSubmit('form')"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import "@/styles/auto-style.css";
import { dateTimeFormat, nullFormat } from "@/utils/format";
import {
  getAction,
  postActionByJson,
  postActionByQueryString,
} from "@/api/manage";

export default {
  data() {
    return {
      url: {
        addDocumentType: "/document/type/insertType",
        addDocumentSecurity: "/document/security/insertSecurity",
        addDocumentDepartment: "/document/department/insertDepartment",
        addDocumentLevel: "/document/level/insertLevel",
        // 查询所有类别
        findAllTypeExist: "/document/type/selectAllType",
        findAllSecurityExist: "/document/security/selectAllSecurity",
        findAllLevelExist: "/document/level/selectAllLevel",
        findAllDepartmentExist: "/document/department/selectAllDepartment",
        // 修改描述信息
        updateDocumentType: "/document/type/updateType",
        updateDocumentSecurity: "/document/security/updateSecurity",
        updateDocumentDepartment: "/document/department/updateDepartment",
        updateDocumentLevel: "/document/level/updateLevel",
        // 修改是否有效
        updateTypeStatus: "/document/type/updateTypeStatus",
        updateSecurityStatus: "/document/security/updateSecurityStatus",
        updateDepartmentStatus: "/document/department/updateDepartmentStatus",
        updateLevelStatus: "/document/level/updateLevelStatus",
      },
      searchForm: {},
      params: [
        {
          id: 1,
          title: "发文类别",
          item: "type",
          isActive: 1,
          layer: 1,
          children: [],
        },
        {
          id: 2,
          title: "安全权限",
          item: "security",
          isActive: 1,
          layer: 1,
          children: [],
        },
        {
          id: 3,
          title: "发文部门",
          item: "department",
          isActive: 1,
          layer: 1,
          children: [],
        },
        {
          id: 4,
          title: "优先级别",
          item: "level",
          isActive: 1,
          layer: 1,
          children: [],
        },
      ],
      addDialog: {
        addForm: {},
        title: "",
        visible: false,
      },
      loading: true,
      expandedRowKeys: [],
      updateDialog: {
        updateForm: {}, // 接收当前修改模态框里的数据
        title: "",
        visible: false,
      },
    };
  },
  created() {
    // this.loadPools()
  },
  methods: {
    // 固定写法
    onExpand(expanded, record) {
      // console.log('extend:' + expanded)
      // console.log('record: ' + JSON.stringify(record))
      if (expanded) {
        // 只要有展开的父级，现将其他父级折叠
        if (this.expandedRowKeys.length != 0) {
          this.expandedRowKeys = [];
        }
        // 设置展开窗Key，代表展开操作
        this.expandedRowKeys.push(record.id);
        this.selectItems(record);
      } else {
        // 代表折叠操作
        if (this.expandedRowKeys.length) {
          this.expandedRowKeys = this.expandedRowKeys.filter((v) => {
            return v !== record.id;
          });
        }
      }
    },
    toSearch() {},
    // 监听switch开关状态的改变
    userStateChange(scope) {
      this.deleteItem(scope);
    },
    add() {
      this.addDialog.title = "新增";
      this.addDialog.visible = true;
    },
    submitHandler() {
      if (this.addDialog.addForm.parentType != null) {
        if (this.addDialog.addForm.describe != null) {
          let parentType = this.addDialog.addForm.parentType;
          let describe = this.addDialog.addForm.describe;
          let requestUrl;
          switch (parentType) {
            case "发文类别":
              requestUrl = this.url.addDocumentType;
              break;
            case "安全权限":
              requestUrl = this.url.addDocumentSecurity;
              break;
            case "发文部门":
              requestUrl = this.url.addDocumentDepartment;
              break;
            case "优先级":
              requestUrl = this.url.addDocumentLevel;
              break;
          }
          console.log(requestUrl);
          postActionByQueryString(requestUrl, { describe: describe })
            .then((resp) => {
              this.$message.success("success");
              this.addDialog.addForm = {};
              this.addDialog.visible = false;
              // 只要有展开的父级，现将其他父级折叠
              if (this.expandedRowKeys.length != 0) {
                this.expandedRowKeys = [];
              }
            })
            .catch((item) => {
              console.log(item);
              // this.$message( {type : 'warning', message : '添加失败'} )
              // this.$message.warning(item)
            })
            .finally(() => {
              this.addDialog.addForm = {};
              this.addDialog.visible = false;
              this.toSearch();
            });
          console.log(this.addDialog.addForm.parentType);
          console.log(this.addDialog.addForm.describe);
        } else {
          return this.$message.error("请输入描述信息");
        }
      } else {
        return this.$message.error("请选择父级分类");
      }
    },
    selectItems(record) {
      let item = record.item;
      let requestUrl;
      if (item != null) {
        switch (item) {
          case "type":
            requestUrl = this.url.findAllTypeExist;
            break;
          case "security":
            requestUrl = this.url.findAllSecurityExist;
            break;
          case "level":
            requestUrl = this.url.findAllLevelExist;
            break;
          case "department":
            requestUrl = this.url.findAllDepartmentExist;
            break;
        }
        console.log(this.params[record.id - 1].item);
        getAction(requestUrl).then((resp) => {
          this.$set(this.params[record.id - 1], "children", resp.data);
        });
        // .catch((e)=> {console.log(e)})
        // .finally(()=>{
        //   this.$message.warning("请求异常")
        // })
      } else {
        this.$message.warning("请求参数为null");
      }
    },
    dateTimeFormat,
    showUpdateDialog(scope) {
      this.updateDialog.title = "修改";
      this.updateDialog.visible = true;
      this.updateDialog.updateForm = scope;
      Object.keys(scope).forEach((key) => {
        switch (key) {
          case "type":
            this.$set(this.updateDialog.updateForm, "parentType", "发文类别"),
              this.$set(this.updateDialog.updateForm, "describe", scope[key]);
            break;
          case "security":
            this.$set(this.updateDialog.updateForm, "parentType", "安全权限"),
              this.$set(this.updateDialog.updateForm, "describe", scope[key]);
            break;
          case "level":
            this.$set(this.updateDialog.updateForm, "parentType", "优先级"),
              this.$set(this.updateDialog.updateForm, "describe", scope[key]);
            break;
          case "department":
            this.$set(this.updateDialog.updateForm, "parentType", "发文部门"),
              this.$set(this.updateDialog.updateForm, "describe", scope[key]);
            break;
        }
      });
    },
    updateSubmit() {
      if (
        this.updateDialog.updateForm.describe != null &&
        this.updateDialog.updateForm.describe != ""
      ) {
        if (
          this.updateDialog.updateForm.describe !=
          this.updateDialog.updateForm.title
        ) {
          let resultUrl = "";
          Object.keys(this.updateDialog.updateForm).forEach((key) => {
            switch (key) {
              case "type":
                resultUrl = this.url.updateDocumentType;
                break;
              case "security":
                resultUrl = this.url.updateDocumentSecurity;
                break;
              case "level":
                resultUrl = this.url.updateDocumentLevel;
                break;
              case "department":
                resultUrl = this.url.updateDocumentDepartment;
                break;
            }
          });
          postActionByQueryString(resultUrl, {
            id: this.updateDialog.updateForm.id,
            describe: this.updateDialog.updateForm.describe,
          })
            .then((resp) => {
              this.$message.success("success");
              this.updateDialog.updateForm = {};
              this.updateDialog.visible = false;
              // 只要有展开的父级，现将其他父级折叠
              if (this.expandedRowKeys.length != 0) {
                this.expandedRowKeys = [];
              }
            })
            .catch((item) => {
              console.log(item);
              // this.$message( {type : 'warning', message : '添加失败'} )
              // this.$message.warning(item)
            })
            .finally(() => {
              this.updateDialog.updateForm = {};
              this.updateDialog.visible = false;
            });
        } else {
          this.$message.info("未做出修改");
          this.updateDialog.visible = false;
        }
      } else {
        this.$message.warning("描述信息不能为空！");
      }
    },
    deleteItem(scope) {
      if (scope) {
        let resultUrl = "";
        Object.keys(scope).forEach((key) => {
          switch (key) {
            case "type":
              resultUrl = this.url.updateTypeStatus;
              break;
            case "security":
              resultUrl = this.url.updateSecurityStatus;
              break;
            case "level":
              resultUrl = this.url.updateLevelStatus;
              break;
            case "department":
              resultUrl = this.url.updateDepartmentStatus;
              break;
          }
        });
        postActionByQueryString(resultUrl, {
          id: scope.id,
          isActive: 0,
        })
          .then((resp) => {
            this.$message.success("success");
            this.updateDialog.updateForm = {};
            this.updateDialog.visible = false;
            // 只要有展开的父级，现将其他父级折叠
            if (this.expandedRowKeys.length != 0) {
              this.expandedRowKeys = [];
            }
          })
          .catch((item) => {
            console.log(item);
            // this.$message( {type : 'warning', message : '添加失败'} )
            // this.$message.warning(item)
          })
          .finally(() => {
            // this.updateDialog.updateForm = {}
            // this.updateDialog.visible = false
          });
      } else {
        return this.$message.warning("删除失败！");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.pro_pool_list {
  /deep/.el-form-item__content {
    height: auto;
    line-height: 32px;
    margin-left: 90px !important;
  }
}
</style>
